import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Image, Input, Radio, Upload } from 'antd';
import adminApi from '../../../services/admin';

const AdminForm = ({ type, adminInfo, setAdminInfo, submitHandle }) => {
  const updataInfo = (newVal, key) => {
    const newInfo = { ...adminInfo };
    newInfo[key] = newVal;
    setAdminInfo(newInfo);
  };

  /**
   * 校验管理员账号是否存在
   */
  const checkLoginId = async () => {
    if (adminInfo.loginId && type === 'add') {
      const { data } = await adminApi.adminIsExist(adminInfo.loginId);
      if (data) {
        return Promise.reject('管理员账号已存在');
      }
    }
  };

  const currentAvatar =
    type === 'edit' ? (
      <Form.Item label="当前头像" name="avatar">
        <Image style={{ width: '80px' }} src={adminInfo?.avatar} />
      </Form.Item>
    ) : null;
  return (
    <Form
      name="adminForm"
      onFinish={submitHandle}
      autoComplete="off"
      initialValues={adminInfo}
    >
      <Form.Item
        label="管理员账号"
        name="loginId"
        validateTrigger="onBlur"
        rules={[
          {
            required: true,
            message: '请输入管理员账号',
          },
          {
            validator: checkLoginId,
          },
        ]}
      >
        <Input
          value={adminInfo?.loginId}
          disabled={type === 'add' ? false : true}
          onChange={(e) => {
            updataInfo(e.target.value, 'loginId');
          }}
        />
      </Form.Item>

      <Form.Item
        label="管理员密码"
        name="loginPwd"
        rules={[
          type === 'edit'
            ? {
                required: true,
                message: '请输入管理员密码',
              }
            : null,
        ]}
      >
        <Input.Password
          value={adminInfo?.loginPwd}
          placeholder={type === 'add' ? '密码可选，默认为123123' : ''}
          onChange={(e) => {
            updataInfo(e.target.value, 'loginPwd');
          }}
        />
      </Form.Item>
      <Form.Item label="管理员昵称" name="nickname">
        <Input
          value={adminInfo?.nickname}
          placeholder="昵称可选，默认为新增管理员"
          onChange={(e) => {
            updataInfo(e.target.value, 'nickname');
          }}
        />
      </Form.Item>
      <Form.Item
        label="权限选择"
        name="permission"
        rules={[{ required: true, message: '请选择权限类型' }]}
      >
        <Radio.Group
          value={adminInfo?.permission}
          onChange={(e) => {
            updataInfo(e.target.value, 'permission');
          }}
        >
          <Radio value={2}>普通管理员</Radio>
          <Radio value={1}>超级管理员</Radio>
        </Radio.Group>
      </Form.Item>
      {currentAvatar}
      <Form.Item label="上传头像" valuePropName="fileList">
        <Upload
          listType="picture-card"
          maxCount={1}
          action="/api/upload"
          onChange={(e) => {
            if (e.file.status === 'done') {
              const url = e.file.response.data;
              updataInfo(url, 'avatar');
            }
          }}
        >
          <div>
            <PlusOutlined /> <div style={{ marginTop: '8px' }}>头像可选</div>
          </div>
        </Upload>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          确认
        </Button>
        <Button type="link">重置</Button>
      </Form.Item>
    </Form>
  );
};

export default AdminForm;
